<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>添加排班</title>
    <meta name="description" content="添加排班">
    <meta name="keywords" content="添加排班">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>添加排班</h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>添加排班</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <div class="block" >
                    排班月份：
                    <el-date-picker
                            v-model="selectMonth"
                            type="month"
                            placeholder="  请选择月份">
                    </el-date-picker>
                </div>

                <div style="margin-top: 20px">
                    需值班天数：
                    <el-input
                            placeholder="请输入内容"
                            v-model="dutyDate"
                            :disabled="true"
                            style="width: 100px;">
                    </el-input>
                </div>
                <div style="margin-top: 20px"> 参与值班人员：</div>

                <div class="block" style="margin-top: 10px">
                    <template >
                        <el-transfer v-model="value" :data="data"></el-transfer>
                    </template>
                </div>

                <div slot="footer" class="dialog-footer" style="margin-top: 30px">
                    <el-button @click="dialogFormVisible = false" style="margin-left: 200px">取消</el-button>
                    <el-button type="primary" @click="handleAdd()">确定</el-button>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    export default {
        data() {
            const generateData = _ => {
                const data = [];
                for (let i = 1; i <= 15; i++) {
                    data.push({
                        key: i,
                        label: `备选项 ${ i }`,
                        disabled: i % 4 === 0
                    });
                }
                return data;
            };
            return {
                data: generateData(),
                value: [1, 4]
            };
        }
    };
</script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            selectMonth:"",
            dutyDate:"",
            username:[]
        },

        created() {

            this.findPage();
        },
        methods: {

        }
    })
</script>
</html>